<!-- 12 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      ref="queryForm"
      group="glassList"
      :model="queryForm"
      >
      <a-row
        :gutter="[16, 0]"
      >
        <a-col :span="6">
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId" :rules="{ required: true, message: $t('valid_required'), trigger: 'change'}">
            <a-select v-model:value="queryForm.shopId" class="select-width" @change="changeShopId">
              <a-select-option v-for="item in shopIdArr"
              :key="item.shopId" :value="item.shopId">
              {{item.shopId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_cstId')" name="cstId">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.cstId"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_cstState')" name="cstState">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.cstState"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_holdState')" name="holdState">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.holdState"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_location')" name="location">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.location"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_cleanState')" name="cleanState">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.cleanState"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_transferState')" name="transferState">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.transferState"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_owner')" name="owner">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.owner"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_glassQty')" name="glassQty">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.glassQty"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_control')" name="control">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.control"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productId')" name="productId">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.productId"
              class="width-input"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="4" class="global-oper-row-title">{{ $t('T9_glassList') }}</a-col>
      <a-col :span="7">
        <a-radio-group name="radioGroup" :default-value="0" @change="changeGlassOrCst">
          <a-radio :value="0">
            {{ $t('T9_glass') }}
          </a-radio>
          <a-radio :value="1">
            {{ $t('T9_cst') }}
          </a-radio>
        </a-radio-group>
      </a-col>
      <a-col :span="7">
        <a-descriptions
          bordered
          :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
        >
          <a-descriptions-item :label="$t('T9_totalGlass')">{{ table.totalGlass }}</a-descriptions-item>
          <a-descriptions-item :label="$t('T9_totalCst')">{{ table.totalGlass }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :span="4" class="global-oper-row-extra">
        <a-button>{{ $t('t9_toExcel') }}</a-button>
      </a-col>
    </a-row>
    <t-table
      v-if="glassOrCst === 0"
      :data="table.cstListByMachineDTOList"
      @checkbox-change="selectChangeEvent"
      @checkbox-all="selectChangeEvent"
    >
      <t-column type="checkbox" width="80px" :title="$t('T9_select')"/>
      <t-column field="slot" :title="$t('T9_slot')" />
      <t-column field="glassId" :title="$t('T9_glassId')" />
      <t-column field="cstId" :title="$t('T9_cstId')" />
      <t-column field="boxId" :title="$t('T9_boxId')" />
      <t-column field="palletId" :title="$t('T9_palletId')" />
      <t-column field="glassGrade" :title="$t('T9_glassGrade')" />
      <t-column field="samplingOperation" :title="$t('T9_samplingOperation')" />
      <t-column field="glassJudge" :title="$t('T9_glassJudge')" />
      <t-column field="sortGrade" :title="$t('T9_sortGrade')" />
      <t-column field="prFlag" :title="$t('T9_prFlag')" />
      <t-column field="metalFlag" :title="$t('T9_metalFlag')" />
      <t-column field="shortCutFlag" :title="$t('T9_shortCutFlag')" />
      <t-column field="productState" :title="$t('T9_productState')" />
      <t-column field="processState" :title="$t('T9_processState')" />
      <t-column field="controlSite" :title="$t('T9_holdeState')" />
      <t-column field="cancelTpe" :title="$t('T9_inlineReworkCount')" />
      <t-column field="timeUsedLimit" :title="$t('T9_productReasonCode')" />
      <t-column field="timeUsed" :title="$t('T9_panelQty')" />
      <t-column field="maxUsedDayLimit" :title="$t('T9_panelGrades')" />
      <t-column field="durationUsed" :title="$t('T9_denseBoxId')" />
      <t-column field="name" :title="$t('T9_sourcePart')" />
      <t-column field="capacity" :title="$t('T9_groupId')" />
      <t-column field="lastCleanTime" :title="$t('T9_owner')" />
      <t-column field="department" :title="$t('T9_ownerType')" />

      <t-column field="metalFlag" :title="$t('T9_dummyUsedCount')" />
      <t-column field="shortCutFlag" :title="$t('T9_reworkCount')" />
      <t-column field="productState" :title="$t('T9_glassComment')" />
      <t-column field="processState" :title="$t('T9_stayHour')" />
      <t-column field="controlSite" :title="$t('T9_runMode')" />
      <t-column field="cancelTpe" :title="$t('T9_abnormalCode')" />
      <t-column field="timeUsedLimit" :title="$t('T9_rtirStartFlag')" />
      <t-column field="timeUsed" :title="$t('T9_reworkFlag')" />
      <t-column field="maxUsedDayLimit" :title="$t('T9_registerReworkFlow')" />
      <t-column field="durationUsed" :title="$t('T9_qtimeFlag')" />
      <t-column field="name" :title="$t('T9_qtime')" />
      <t-column field="capacity" :title="$t('T9_processFlag')" />
      <t-column field="lastCleanTime" :title="$t('T9_processResult')" />
      <t-column field="department" :title="$t('T9_eqpMaker')" />

      <t-column field="productState" :title="$t('T9_nextMainStep')" />
      <t-column field="processState" :title="$t('T9_validateStep')" />
      <t-column field="controlSite" :title="$t('T9_routeBeforeRework')" />
      <t-column field="cancelTpe" :title="$t('T9_fastRunFlag')" />
      <t-column field="timeUsedLimit" :title="$t('T9_cqltId')" />
      <t-column field="timeUsed" :title="$t('T9_sampleType')" />
      <t-column field="maxUsedDayLimit" :title="$t('T9_rtpFlag')" />
      <t-column field="durationUsed" :title="$t('T9_processresultreason')" />
      <t-column field="name" :title="$t('T9_multiOwnerId')" />
      <t-column field="capacity" :title="$t('T9_uvmaskTime')" />
      <t-column field="lastCleanTime" :title="$t('T9_firstRunEqFlag')" />
    </t-table>
    <t-table
      v-else
      @row-click="getRowData"
      :data="table.cstListByMachineDTOList"
    >
      <t-column field="cstState" :title="$t('T9_cstState')" />
      <t-column field="eventName" :title="$t('T9_holdState')" />
      <t-column field="eventUser" :title="$t('T9_location')" />
      <t-column field="eventComment" :title="$t('T9_cleanState')" />
      <t-column field="reasonCode" :title="$t('T9_transferState')" />
      <t-column field="transferState" :title="$t('T9_owner')" />
      <t-column field="eqpId" :title="$t('T9_glassQty')" />
      <t-column field="zoneId" :title="$t('T9_control')" />
      <t-column field="portId" :title="$t('T9_productId')" />
    </t-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import {
    getShopId,
    getMaskSpec,
    getMaskName,
    getCaseName,
    getList
  } from '@/api/common'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'glassList',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        glassOrCst: '',
        shopIdArr: [],
        maskSpecArr: [],
        maskNameArr: [],
        caseNameArr: [],
        queryForm: {
          shopId: 'Cell',
          maskSpec: '',
          maskName: '',
          caseName: '',
          Date: []
        },
        eventComment: ''
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getShopId()
      this.getList()
      this.queryForm.Date = [moment(getCurrentDate(), 'YYYY-MM-DD HH:mm:ss'), moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm:ss')]
    },
    methods: {
      changeGlassOrCst(val) {
        this.glassOrCst = val
      },
      onChange(value) {
        this.queryForm.Date = value
      },
      changeShopId(val) {
        if (val) {
          this.getMaskSpec()
          this.getCaseName()
        }
      },
      changeCstSpec(val) {
        if (val) {
          this.getCstId()
        }
      },
      getShopId() {
        const params = {
          userGroup: 'CellPIOper'
        }
        getShopId(params).then(res => {
          this.shopIdArr = res
        })
      },
      getMaskSpec() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getMaskSpec(params).then(res => {
          this.maskSpecArr = res
        })
      },
      getMaskName() {
        const params = {
          shopId: this.queryForm.shopId,
          maskSpec: this.queryForm.maskSpec
        }
        getMaskName(params).then(res => {
          this.maskNameArr = res
        })
      },
      getCaseName() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getCaseName(params).then(res => {
          this.caseNameArr = res
        })
      },
      getList() {
        const obj = {
          dtoName: 'ViewMaskCaseHistoryDTO',
          startTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[0].format('YYYY-MM-DD HH:mm:ss') : null,
          endTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[1].format('YYYY-MM-DD HH:mm:ss') : null,
          caseName: this.queryForm.cstId,
          maskName: this.queryForm.cstSpec,
          maskSpec: this.queryForm.cstSpec,
          queryId: 'GetDurableHistoryList',
          shopId: this.queryForm.shopId,
          version: '80001',
          menuName: 'viewMaskCaseHistory',
          usage: 'getCaseHistory'
        }
        getList(obj).then(res => {
          this.table = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
</style>
